{% extends 'customer_dashboard.html' %}

{% block content %}
<style>
  .card {
    background-color: #f5f9ff;
    padding: 30px 40px;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    max-width: 600px;
    margin: 0 auto;
  }

  .card h2 {
    text-align: center;
    font-size: 24px;
    margin-bottom: 10px;
  }

  .card p.subtext {
    text-align: center;
    color: #555;
    margin-bottom: 20px;
  }

  .form-group {
    margin-bottom: 18px;
  }

  .form-group label {
    font-weight: 600;
    display: block;
    margin-bottom: 6px;
  }

  .form-group input,
  .form-group select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 15px;
  }

  .form-group input:focus,
  .form-group select:focus {
    outline: none;
    border-color: #3399ff;
    box-shadow: 0 0 6px rgba(51, 153, 255, 0.4);
  }

  .btn {
    background-color: #3399ff;
    color: white;
    border: none;
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 15px;
    cursor: pointer;
    text-decoration: none;
  }

  .btn:hover {
    background-color: #267cd6;
  }

  .message {
    text-align: center;
    font-weight: bold;
    margin-bottom: 15px;
  }

  .btn-group {
    text-align: center;
    margin-top: 25px;
  }

  .btn-group .btn + .btn {
    margin-left: 15px;
  }
</style>

<div class="card">
  <h2><i class="bi bi-lock"></i> 修改银行卡密码</h2>
  <p class="subtext">请选择您要修改密码的银行卡，并填写原密码、新密码及确认新密码：</p>

  {% if message %}
    <p class="message" style="color: {{ 'green' if success else 'red' }};">{{ message }}</p>
  {% endif %}

  <form method="POST">
    <div class="form-group">
      <label for="cardID"><i class="bi bi-credit-card"></i> 银行卡号：</label>
      <select name="cardID" id="cardID" required>
        <option value="">-- 请选择卡号 --</option>
        {% for card in cards %}
          <option value="{{ card.cardID }}">
            {{ card.cardID }} - 余额: {{ "%.2f"|format(card.balance) }} 元
          </option>
        {% endfor %}
      </select>
    </div>

    <div class="form-group">
      <label for="old_password"><i class="bi bi-shield-lock"></i> 原密码：</label>
      <input type="password" name="old_password" id="old_password" required>
    </div>

    <div class="form-group">
      <label for="new_password"><i class="bi bi-lock-fill"></i> 新密码：</label>
      <input type="password" name="new_password" id="new_password" required>
    </div>

    <div class="form-group">
      <label for="confirm_password"><i class="bi bi-lock-fill"></i> 确认新密码：</label>
      <input type="password" name="confirm_password" id="confirm_password" required>
    </div>

    <div class="btn-group">
      <button type="submit" class="btn">确认修改</button>
      <a href="{{ url_for('customer.customer_home') }}" class="btn">返回主页</a>
    </div>
  </form>
</div>
{% endblock %}
